<template>
	<view>
		<view class="box">
			<uni-popup :ref="refs" background-color="#fff" :mask-click="false" type="dialog">
				<view class="popup-content">
					<view class="list" v-for="(item, index) in list" :key="index" @tap="check(item.type, item)">{{item.text}}</view>
					<view class="line"></view>
					<view class="list margin_top_10" @click="cancel">取消</view>
				</view>
			</uni-popup>
		</view>
		
		<view class="popupList">
			<uni-popup ref="popupList" background-color="#fff" type="center">
				<uni-section title="我的歌单" type="line"></uni-section>
				<view class="popup-content">
					<view class="item_box_content border" :class="item.isDel ? 'is_del' : ''" v-for="(item, index) in manageList" :key="index" @tap="checked(index)">
						<image :src="item.coverImgUrl" mode=""></image>
						<view class="item_box_content_info">
							<uni-title :title="item.title" color="#000"></uni-title>
							<uni-title :title="item.author" color="#444"></uni-title>
						</view>
						<view class="check" v-show="item.isDel"><uni-icons type="checkmarkempty" color="#ff0000" size="26"></uni-icons></view>
					</view>
				</view>
				<view class="btn">
					<view @tap="close">关闭</view>
					<view @tap="define">确定</view>
				</view>
			</uni-popup>
		</view>
	</view>
</template>

<script>
	import util from '@/utils/util.js';
	import {songLyric} from '@/API/API.js';
	export default {
		name:"u-popup-list",
		
		props: {
			list: {
				type: Array,
				default: [],
				songSheetID: 0
			},
			
			refs: ''
		},
		
		data() {
			return {
				songList: [],
				manageList: [],
				lyric: ''
			};
		},
		
		mounted() {
			let _this = this;
			
			let refs = this.$refs[this.refs];
			
			setTimeout(() => {
				const on = uni.$on('popup', function(data){
					if(data['type'] == 'popup'){
						refs.open('bottom');
						if(data['param']){
							_this.songList = data['param'];
						}
						
					}
				});
				
				uni.$on('close', function(){
					refs.close();
				})
			},400);
		},
		
		methods: {
			cancel(){
				this.$refs[this.refs].close();
			},
			
			check(type, item){
				switch(type){
					case 'collection':
						let value = JSON.parse(util.getStorageSync('collection'));
						if(item.text == '收藏'){							
							if(value.length){
								value.unshift(this.songList);
								util.setStorageSync('collection', JSON.stringify(value));
							}else{
								let value = [];
								value.push(this.songList);
								util.setStorageSync('collection', JSON.stringify(value));
							}

							uni.showToast({ title: '收藏成功', icon: 'none', duration: 3000 });
						}else{
							value.some((val, key) => {
								if(val.id == this.songList.id){
									value.splice(key, 1);
									util.setStorageSync('collection', JSON.stringify(value));
									uni.showToast({ title: '已取消收藏', icon: 'none', duration: 3000 });
									this.$emit('update');
									return true;
								}
							});
						}

						this.cancel();
					break;
					case 'add':
						let songSheet = JSON.parse(util.getStorageSync('songSheet'));
						if(songSheet.length){
							this.manageList = songSheet;
							this.$refs.popupList.open()
						}else{
							uni.switchTab({ url: '/pages/my/my' });
							this.$refs[this.refs].close();
							uni.$emit('songSheetBox', {type: 'create', title: '创建歌单'});
						}
						this.cancel();
					break;
					case 'select':
						util.jump('navigateTo', '/pages/artist/artist?id=' + this.songList.ar[0].id);
					break;
					case 'create':
						this.$refs[this.refs].close();
						uni.$emit('songSheetBox', {type: 'create', title: '创建歌单'});
					break;
					case 'manage':
						this.$refs[this.refs].close();
						uni.$emit('songSheetBox', {type: 'manage', title: '歌单管理'});
					break;
					case 'regain':
						this.$refs[this.refs].close();
						uni.$emit('songSheetBox', {type: 'regain', title: '恢复歌单'});
					break;
				}
			},
			
			close() {
				this.$refs.popupList.close();
			},
			
			checked(index){
				this.manageList.forEach((val, key) =>{
					if(index === key){
						val.isDel = true;
						this.songSheetID = val.id;
					}else{
						val.isDel = false;
					}
				});
			},
			
			define(){
				if(!this.songSheetID){
					this.$refs.popupList.close();
					uni.showToast({ title: '请选择歌单', icon: 'none', duration: 3000 });
					return false;
				}else{
					this.songLyric(this.songList.id);
				}
			},
			
			songLyric(id){
				songLyric({id: id}).then(data => {
					var lrcObj = {};
					var lyricArr = data.lrc.lyric.split('[').slice(1);
					lyricArr.forEach(item => {
						var arr = item.split(']');
						// 时间换算成秒
						var m = parseInt(arr[0].split(':')[0])
						var s = parseInt(arr[0].split(':')[1])
						arr[0] = m * 60 + s;
						if (arr[1] != '\n') { // 去除歌词中的换行符
							lrcObj[arr[0]] = arr[1];
						}
					});
					this.lyric = lrcObj;
				});
			}
		},
		
		watch:{
			lyric(newVal){
				let data = {};
				let value = JSON.parse(util.getStorageSync('songSheetList'));
				if(value.length){
					let falg = false;
					value.some((val, key) => {
						for (let k in val) {
							if(k == this.songSheetID){
								for (let i = 0; i < val[k].length; i++){
									if(val[k][i].id == this.songList.id){
										uni.showToast({ title: '此歌曲已再歌单', icon: 'none', duration: 3000 });
										this.$refs.popupList.close();
										return true;
									}
								}
								this.songList.songLyric = this.lyric;
								val[k].unshift(this.songList);
								util.setStorageSync('songSheetList', JSON.stringify(value));
								uni.showToast({ title: '添加歌单成功', duration: 3000 });
								falg = false;
								return true;
							}
							
							falg = true;
						}
					});
					
					if(falg){
						this.songList.songLyric = this.lyric;
						let item = [];
						item.push(this.songList);
						data[this.songSheetID] = item;
						value.unshift(data);
						util.setStorageSync('songSheetList', JSON.stringify(value));
						uni.showToast({ title: '添加歌单成功', duration: 3000 });
						this.close();
					}
				}else{
					this.songList.songLyric = this.lyric;
					let item = [];
					item.push(this.songList);
					data[this.songSheetID] = item;
					value.unshift(data);
					util.setStorageSync('songSheetList', JSON.stringify(value));
					uni.showToast({ title: '添加歌单成功', duration: 3000 });
					this.close();
				}
				
				
				this.$refs.popupList.close();
			}
		}
	}
</script>

<style>
	/deep/.center{
		width: 90%;
		padding: 10px 14px;
		border-radius: 8px;
	}
	
	/deep/.uni-popup{
		z-index: 1000;
	}
	
	/deep/.uni-title__base{
		font-size: 13px;
	}
	
	.popupList{
		width: 87%;
		padding: 10px 14px;
		border-radius: 8px;
	}
	
	.list{
		width: 100%;
		font-size: 14px;
		text-align: center;
		padding: 10px 0;
	}
	
	.line{
		height: 6px;
		background-color: #eaeaec;
	}
	
	
	.btn{
		display: flex;
		font-size: 14px;
		text-align: center;
		height: 40px;
		line-height: 40px;
		font-size: 14px;
		margin-top: 10px;
	}
	
	.btn view:first-child {
		border-right-color: #f5f5f5;
		border-right-style: solid;
		border-right-width: 1px;
	}
	
	.btn view{
		width: 50%;
		border-top-color: #f5f5f5;
		border-top-style: solid;
		border-top-width: 1px;
	}
	
	.item_box_content{
		display: flex;
		align-items: center;
		flex: 1;
		margin-bottom: 20px;
	}
	
	.item_box_content image{
		width: 60px;
		height: 60px;
		border-radius: 8px;
		margin-right: 6px;
	}
	
	.item_box_content .item_box_content_info{
		display: flex;
		flex-direction: column;
	}
	
	.border{
		border: 1px solid #ccc;
		border-radius: 6px;
		padding: 10px;
		margin-bottom: 10px;
		position: relative;
	}
	
	.popup-content .is_del{
		border: 1px solid #ff0000;
	}
	
	.item_box_content .check{
		position: absolute;
		top: 0;
		right: 0;
	}
</style>